<template>
  <div class="content">
    <div class="header">
      <div class="title" @click="goList">电商网站示例</div>
      <div class="title right" @click="goCard">购物车<span v-if="cartList.length" class="marker">{{cartList.length}}</span></div>
    </div>
    
    <router-view/>
  </div>
</template>
<script>
export default {
  methods:{
    goList(){
      this.$router.push({name:'product'});
    },
    goCard(){
      this.$router.push({name:'cart'});
    }
  },
  computed:{
    cartList(){
      console.log()
      return this.$store.state.cart.cartList;
    }
  },
  mounted(){
     this.$router.push({name:'product'});
  }
}
</script>

<style lang="css" scoped>
.marker{
  margin-left: 5px;
  display: inline-block;
  background-color: #ff5500;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  line-height: 16px;
  font-size: 12px;
}
.content{
  background-color: #f8f8f9;
}
.header{
  height: 48px;
  background-color:rgba(0,0,0,.8);
}
.title{
  float:left;
  color:white;
  line-height: 48px;
  padding-left: 32px;
  cursor: pointer;
}
.header .right{
  float:right;
  margin-left:0;
  margin-right: 32px;
}
</style>

